Configure Okta for Identity

The Moesif Developer Portal requires an Identity Provider to secure the front-end application and control access. Below are the steps required to set up Okta as an identity provider to work with the Moesif Developer Portal.

Creating the App within Okta

To configure Okta for the Moesif Developer Portal, follow these steps:

  1. Log into Okta:
    • From the left-side menu, click on Applications and select Applications.
  2. Create a New App Integration:
    • Click the Create App Integration button on the Applications page.
  3. Select App Type:
    • In the modal that appears:
      • Under Sign-in method, choose OIDC - OpenID Connect.
      • Under Application type, select Single-Page Application.
      • Click Next.
  4. Configure App Details:
    • App integration name: Enter a name, such as Developer Portal.
    • Grant type: Ensure Authorization Code and Refresh Token are selected.
    • Sign-in redirect URIs: Add the redirect URI for your environment, e.g., http://127.0.0.1:4000/login/callback if running locally.
    • Sign-out redirect URIs: Add a URI like http://127.0.0.1:4000/.
    • Assignments: Choose Skip group assignment for now unless specific group assignments are needed.
  5. Save the Configuration:
    • Scroll to the bottom of the page and click Save to save the application settings.

Adding Okta to the Moesif Developer Portal

To connect Okta to the Developer Portal, you’ll need to update the environment variables.

Retrieving Values from Okta

  1. Navigate to the Applications screen in the Okta console.
  2. Select the application you created for the Developer Portal.
  3. Go to the General tab.
  4. Locate the following values and copy them:
    • Client ID: Use this value for the REACT_APP_OKTA_CLIENT_ID entry in the frontend environment configuration.
    • Issuer (Org URL): Use this value for the REACT_APP_OKTA_ORG_URL in the frontend configuration and the OKTA_DOMAIN in the backend configuration. When configuring the frontend, append /oauth2/default to this URL.
  5. Generate an API Token:

Updating Environment Variables

Environment Variables for Node

To configure Okta in the Developer Portal, you will need to update two .env files located in different parts of your project:

  • my-dev-portal-api/.env: This is where you configure the backend API environment.
  • my-dev-portal/.env: This is where you configure the frontend environment.
Backend Configuration
  • Open the my-dev-portal-api/.env file.
  • Replace the following lines with the correct values:
OKTA_DOMAIN="https://your-okta-url.okta.com/"
OKTA_API_TOKEN="your_api_token_here"
OKTA_APPLICATION_ID="your_app_client_id_here"
  • Save the .env file to ensure the updated values are persisted.
Frontend Configuration
  • Open the my-dev-portal/.env file.
  • Replace the following lines with the correct values:
REACT_APP_OKTA_ORG_URL="https://yoururl.okta.com/oauth2/default"
REACT_APP_OKTA_CLIENT_ID="Your Okta Client ID"
  • Save the .env file to ensure the updated values are persisted.

Environment Variables for Docker

  • Open the distribution/docker-compose.yml file.
  • Add or update the following entries in the relevant service configuration under environment:
dev-portal-api:
  environment:
    - OKTA_DOMAIN="https://your-okta-url.okta.com/"
    - OKTA_API_TOKEN="your_api_token_here"
    - OKTA_APPLICATION_ID="your_app_client_id_here"

dev-portal:
  environment:
    - REACT_APP_OKTA_ORG_URL="https://yoururl.okta.com/oauth2/default"
    - REACT_APP_OKTA_CLIENT_ID="Your Okta Client ID"
  • Save the docker-compose.yml file to ensure the updated values are persisted.

Next Steps

Once all the values are added, save the files to ensure the updated values are persisted. You can then proceed to configure your billing provider.

Verifying Identity Provider Functionality

After configuring the rest of the developer portal, verify the identity provider functionality in the Okta console. Navigate to the Directory > People screen, where you should see your newly created user tracked by their email address.

Updated: